<template>
    <div>
      <h2 class="h2">工单详情页</h2>
      <br> <br>
      <div style="margin-left: 20px;">
        <div class="suborder-title">
          用户申请详情
        </div>
        <div style="margin-left: 80px">
          <table class="table table-striped">
            <thead>
            <tr>
              <th>标题</th>
              <th>数据</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(suborder,key)  in workorder_info.field_list" :key="key">
              <td>{{ suborder.verbos_name }}</td>
              <td>{{ suborder.value }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div style="margin-left: 20px;">
        <div class="suborder-title">
        审批详情
        </div>
      <div v-for="(suborder,key) in suborder_list1" style="margin-top: 30px" :key="key">
        <div class="detail-title">
          <span v-if="suborder.approve_user">
            第{{ suborder.sequence_number }}步：{{ suborder.approve_user }}审批
          </span>
          <span v-if="suborder.approve_user_role">
            第{{ suborder.sequence_number }}步：{{ suborder.approve_user_role }}审批
          </span>
        </div>

        <div style="margin-left: 80px;margin-top: 20px;font-size: 18px;">
          <table class="table table-striped">
            <thead>
            <tr>
              <th>审批人</th>
              <th>审批角色</th>
              <th>审批状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>{{ suborder.approve_user }}</td>
              <td>{{ suborder.approve_user_role }}</td>
              <td>{{ suborder.action_status }}</td>
            </tr>
            </tbody>
          </table>
          <div v-if="suborder.has_perm">
            <div style="width: 500px;">
              <label>审批：</label>
              <a-textarea
                style="margin-left: 30px;margin-top: 15px;"
                v-model="approve_text"
                placeholder="Controlled autosize"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </div>
            <div style="margin-top: 20px">
              <a-button @click="suborderApprove('1' , suborder.id)" type="primary">
                通过
              </a-button>
              <a-button @click="suborderApprove('2' , suborder.id)" type="dashed">
                退回
              </a-button>
              <a-button @click="suborderApprove('3' , suborder.id)" type="danger">
                拒绝
              </a-button></div>
          </div>
        </div >

      </div>
    </div>
   </div>
</template>

<script>
import axios from 'axios'
import { approveSubOrder } from '@/http/api.js'
import { getSubOrderList } from '@/http/api.js'
export default {
    data() {
        return {
          workorder_id: '',
          workorder_info: {},
          suborder_list: [],
          suborder_list1:[],
          approve_text: '',
        }
    },
    methods: {
      suborderApprove(action_status,suborder_id){
      console.log(action_status, 'oooooooooooooooo', suborder_id)
      const requestData = {
        suborder_id: suborder_id,
        action_status: action_status,
        approve_text: this.approve_text,
      }
      approveSubOrder(requestData).then(resp =>{
        console.log(resp)
        this.initList()
      }).catch(err =>{
        alert(err)
      })
    },
      initList(){
        console.log('initLIst')
        getSubOrderList({workorder_id:this.workorder_id}).then(resp =>{
          console.log(resp)
          this.workorder_info = resp.results.workorder_info;
          this.suborder_list = resp.results.suborder_list;
          this.suborder_list1 = resp.results.suborder_list1;
        }).catch(err =>{
          alert(err)
        })
    }
    },
    created() {
      // this.flowconfData.id = this.$route.query.id
      this.workorder_id = this.$route.query.id
      this.initList()
    }
}
</script>

<style scoped>
.suborder-title {
  border-radius:5%;
  height: 60px;
  width: 90%;
  background-color: black;
  color: white;
  line-height: 60px;
  padding-left: 20px;
  font-size: 22px;
  font-weight: bold
}
.h2{
  float: left;
}
.table{
  border-spacing: 0;
  border-collapse: collapse;
}
.table thead tr th,td{
  padding: 20px;
  padding-left: 50px;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
td,th{
  display: table-cell;
}
</style>
